@extends('layouts.appManager')

@section('title')API接口@endsection

@section('content')
<div class="container py-5" v-if="info">

    <br />

    <el-row :gutter="20">

        <el-col :span="5">
            <h2>sid： <span v-html="info.id"></span></h2>
        </el-col>

        <el-col :span="12" :offset="0">
            <el-input type="text"  v-model="info.api_key">
                <template slot="prepend">api_key：</template>

                <el-button slot="append" @click="getRandKey()">随机生成</el-button>
            </el-input>
        </el-col>

        <el-col :span="4">
            <el-button type="primary" @click="saveConfig()">保存密钥</el-button>
        </el-col>
        <el-col :span="3">
            <a target="_blank" style="line-height: 40px; font-size: 14px" href="https://console-docs.apipost.cn/preview/b550914d46d3f970/a6de371e71fb8797">
                接口文档 >>
            </a>
        </el-col>
    </el-row>
    <br>

    <el-alert
        title=" 提示：使用API接口，请确保SOAP功能正常！"
        type="warning" show-icon>
    </el-alert>

    <el-table
        :data="logs"
        style="width: 100%">
        <el-table-column
            prop="url"
            label="请求地址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="data"
            label="参数"
            >
        </el-table-column>
        <el-table-column width="180"
            prop="created_at"
            label="请求时间">
        </el-table-column>
        <el-table-column width="80"
                         prop="res"
                         label="请求结果">
            <template slot-scope="scope">
                <el-tooltip v-if="scope.row.res" class="item" effect="dark" placement="left">
                    <div slot="content"><textarea cols="50" rows="10" readonly>@{{scope.row.res}}</textarea></div>
                    <i class="el-icon-success"></i>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column width="80"
                         prop="err"
                         label="错误">
            <template slot-scope="scope">
                <el-tooltip v-if="scope.row.err" class="item" effect="dark" :content="scope.row.err" placement="left">
                    <i class="el-icon-error"></i>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <div style="text-align: center; margin-top: 15px">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       layout="prev, pager, next"
                       :page-size="search.size"
                       :total="logs_total">
        </el-pagination>
    </div>

</div>

@endsection
@section('script')

<script>
let serverId = '{{$id}}';

var app = new Vue({
    el: '#app',
    data: {
        serverId: parseInt(serverId),
        info:{},
        logs:[],
        logs_total:4,
        search:{
            page:1,
            size:20,
        }
    },
    mounted() {
        this.getInfo();
        this.getLogList();
    },

    methods: {
        handleCurrentChange(page){
            this.search.page=page;
            this.getLogList();
        },
        getInfo: function() {
            var t = this;
            post("/manager/server/api/" + t.serverId + "/info", {}, res => {
                t.info = res.data;
            }, t);
        },
        getLogList(){
            var t = this;
            post("/manager/server/api/" + t.serverId + "/getLogList", t.search, res => {
                t.logs = res.data.data;
                t.logs_total=res.data.total;
            }, t);
        },
        saveConfig() {
            var t = this;
            post("/manager/server/api/" + t.serverId + "/saveConfig", {
                api_key: t.info.api_key
            }, res => {
                t.$message.success('保存成功');
            }, t);
        },
        getRandKey() {
            var t = this;
            post("/manager/server/api/" + t.serverId + "/getRandKey", {}, res => {
                t.info = res.data;
            }, t);
        }
    }
});
</script>
@endsection
